import React, { useState } from "react";
import { Form, Input, Button, Select, Card, message, Typography } from "antd";
import { UserOutlined, LockOutlined, BookOutlined } from "@ant-design/icons";
import { useNavigate, Link } from "react-router-dom";
import { useUser } from "../../../contexts/UserContext";
import styled from "styled-components";

const { Title, Text } = Typography;

const LoginContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;

const LoginCard = styled(Card)`
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
`;

const LoginTitle = styled.div`
  text-align: center;
  margin-bottom: 32px;
`;

const SystemIcon = styled.div`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
`;

const RegisterLink = styled.div`
  text-align: center;
  margin-top: 16px;
  color: #666;
`;

interface LoginForm {
  username: string;
  password: string;
  role: "admin" | "teacher" | "student";
}

const Login: React.FC = () => {
  const navigate = useNavigate();
  const { login } = useUser();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: LoginForm) => {
    try {
      setLoading(true);
      await login(values.username, values.password, values.role);
      message.success("登录成功");

      // 根据角色跳转到不同的首页
      switch (values.role) {
        case "admin":
          navigate("/admin");
          break;
        case "teacher":
          navigate("/teacher");
          break;
        case "student":
          navigate("/student");
          break;
      }
    } catch (error) {
      message.error("登录失败，请检查用户名和密码");
    } finally {
      setLoading(false);
    }
  };

  return (
    <LoginContainer>
      <LoginCard bodyStyle={{ padding: "32px" }}>
        <LoginTitle>
          <SystemIcon>
            <BookOutlined style={{ fontSize: "24px", color: "white" }} />
          </SystemIcon>

          <Title
            level={2}
            style={{
              margin: 0,
              background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              fontSize: "24px",
              fontWeight: "700",
            }}
          >
            智教质学平台
          </Title>

          <Text
            style={{
              color: "#8c8c8c",
              fontSize: "14px",
              display: "block",
              marginTop: "8px",
            }}
          >
            智慧教学，质量为先
          </Text>
        </LoginTitle>

        <Form<LoginForm>
          name="login"
          initialValues={{ role: "teacher" }}
          onFinish={onFinish}
          size="large"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入用户名/手机号" }]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder="用户名/手机号"
              style={{
                height: "44px",
                borderRadius: "12px",
                border: "2px solid #f0f0f0",
              }}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="密码"
              style={{
                height: "44px",
                borderRadius: "12px",
                border: "2px solid #f0f0f0",
              }}
            />
          </Form.Item>
          <Form.Item
            name="role"
            rules={[{ required: true, message: "请选择身份" }]}
          >
            <Select
              placeholder="请选择登录身份"
              style={{
                height: "44px",
                borderRadius: "12px",
              }}
            >
              <Select.Option value="admin">管理员</Select.Option>
              <Select.Option value="teacher">教师</Select.Option>
              <Select.Option value="student">学生</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              block
              loading={loading}
              style={{
                height: "44px",
                fontSize: "16px",
                fontWeight: "600",
                borderRadius: "12px",
                background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
                border: "none",
                boxShadow: "0 4px 12px rgba(102, 126, 234, 0.3)",
              }}
            >
              登录
            </Button>
          </Form.Item>
        </Form>

        <RegisterLink>
          还没有账号？{" "}
          <Link to="/register" style={{ color: "#667eea" }}>
            立即注册
          </Link>
        </RegisterLink>
      </LoginCard>
    </LoginContainer>
  );
};

export default Login;
